<!-- 配置车辆弹窗 -->
<template>
  <el-dialog
    title="配置车辆"
    :visible="dialogTableVisible"
    @close="isClose"
  >
    <el-card
      shadow="never"
    >
      <el-row
        type="flex"
        justify="center"
      >
        <el-col :span="12">

          <p style="margin-top: 0;">司机编号：<span>{{ userInfo.user.account }}</span></p>
          <p style="margin-top: 0;">司机电话：<span>{{ userInfo.user.mobile }}</span></p>
        </el-col>
        <el-col :span="12">
          <p style="margin-top: 0;">司机名称：<span>{{ userInfo.user.name }}</span></p>

          <p style="margin-top: 0;">司机机构：<span>{{ userInfo.user.agency.name }}</span></p>
        </el-col>
      </el-row>
    </el-card>
    <!-- 选择器 -->
    <!-- ======================================================================== -->
    <label>
      配置车辆：
      <el-select
        v-model="userInfo.cartId"
        class="cartTrademark"
        placeholder="请选择"
        @change="truckDetail"
      >

        <el-option
          v-for="item in searchlist"
          :key="item.id"
          :label="item.truck.licensePlate"
          :value="item.truck.id"
        >
        </el-option>
      </el-select>
    </label>
    <!-- 表格 -->
    <el-table
      :data="userInfo.cartDataArr"
    >
      <el-table-column
        property="licensePlate"
        label="车牌号"
        width="211"
      ></el-table-column>
      <el-table-column
        property="status"
        label="车辆状态"
        width="211"
      >
        <template v-slot="{row}">
          <div
            v-if="row.workStatus === 1"
            class="state"
          >
            <div

              class="work"
            ></div>
            <span class="text">可用</span>
          </div>
          <div
            v-else
            class="state"
          >
            <div class="under"></div>
            <span class="text">不可用</span>
          </div>
        </template>
      </el-table-column>

      <el-table-column
        id="table"
        property="address"
        label="操作"
      >

        <template v-slot="{row}">
          <el-button
            type="text"
            @click="pzlook(row.id)"
          >查看</el-button>
          <el-button
            type="text"
            @click="removeTable"
          >删除</el-button>
        </template>

      </el-table-column>

      <template
        slot="empty"
      >
        <el-empty
          :image-size="70"
          description="这里空空如也"
        ></el-empty>
      </template>
    </el-table>

    <el-row
      type="flex"
      justify="center"
    >
      <el-button class="dialog-btn-ok">确定</el-button>
      <el-button
        class="dialog-btn-no"
        @click="$emit('update:dialogTableVisible',false)"
      >取消</el-button>
    </el-row>
  </el-dialog>
</template>

<script>
import { truckTypeDetail, driverDetail } from '@/api/transit'
export default {
  name: 'CarConfig',
  props: {
    dialogTableVisible: {
      type: Boolean,
      default: false
    },
    searchlist: {
      type: Array,
      default: () => []
    }
  },
  data () {
    return {
      userInfo: {
        cartId: null,
        cartData: {
          truck: {
            licensePlate: ''
          },
          workStatus: 0
        },
        user: {// 司机详情
          name: '',
          account: '',
          agency: '',
          mobile: ''
        },
        cartDataArr: [] // 车辆详情
        // userId: null
      }
    }
  },
  methods: {
    // 获取司机，车辆详情信息
    async truckTypeDetail(carId, userId) {
      const res = await truckTypeDetail(carId)
      const user = await driverDetail(userId)
      this.userInfo.user = user.data
      this.userInfo.cartData = res.data
      this.userInfo.cartId = res.data.id
      this.userInfo.cartDataArr = [this.userInfo.cartData]
      // this.$emit('update:dialogTableVisible', true)
    },
    // 获取车辆详情里面的删除功能
    removeTable() {
      this.userInfo.cartId = null
      this.userInfo.cartDataArr = []
    },
    // 获取车辆详情
    async truckDetail (value) {
      const res = await truckTypeDetail(value)
      this.userInfo.cartDataArr = [res.data]
    },
    // 关闭弹窗
    isClose() {
      this.$emit('update:dialogTableVisible', false)
      // this.dialogTableVisible = true
    },
    pzlook(id) {
      // console.log(row)
      // this.$router.push('/transit/vehicle-detail')
      console.log(id)
      this.$router.push({
        path: '/transit/vehicle-detail',
        query: { id }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.serchBox {
  width: 584px;
  margin: 0 auto;
  margin-top: 19px;
  .el-select {
    width: 238px;
  }
  margin-bottom: 20px;
}
.workTime {
  white-space: nowrap;
}
.header {
  font-size: 13px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
  width: 584px;
  height: 90px;
  background-color: #fbfafa;
  flex-wrap: wrap;
  padding: 21px 52px;
  margin: 0 auto;
  // 使得整体内容距离上部分的距离为20px
  margin-top: -10px;
  .el-input {
    width: 240px;
  }
  div {
    flex: 40%;
     // 使包裹的所有div的上下间距为14px
    // margin-bottom: 14px;
  }
  .num,
  .iphone{
    flex: 60%;
  }
  .num,.name{
    margin-bottom: 14px;
  }
  label {
    width: 71px;
    height: 20px;
    font-family: PingFangSC-Regular;
    font-weight: 400;
    font-size: 14px;
    color: #20232A;
    letter-spacing: 0.16px;
    text-align: right;
  }
  span {
    color: #818693;
    font-size: 14px;
  }
}
.pagination {
  margin: 32px 0 44px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px !important;
  color: #20232a !important;
}
.selected-driver {
  margin-top: 18px;
}
</style>
